import React, { useState,useRef, useEffect,useContext } from 'react';  
import A from "./Daohang1.module.css";   
import logo from '../../picture/tubiao.png';  
import { Outlet, useNavigate } from 'react-router-dom';


  
const Daohang = () => {  
  const nav=useNavigate();
  const [showDropdown, setShowDropdown] = useState('');  
  
  const submenuRefRecipe = useRef(null);  
  const submenuRefHealth = useRef(null);  

  const navbarRef = useRef(null);

  
  useEffect(() => {
    const handleScroll = () => {
      if (navbarRef.current) { // 确保 navbarRef.current 不为空
        if (window.scrollY > 0) {
          navbarRef.current.classList.add(A.sticky);
        } else {
          navbarRef.current.classList.remove(A.sticky);
        }
      }
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
  
  const handleMouseEnter = (dropdownName) => {  
    return () => {  
      setShowDropdown(dropdownName);  
    };  
  };  
  
  const handleMouseLeave = (submenuRef) => {  
    return () => { 
      setTimeout(() => {  
        if (submenuRef.current && !submenuRef.current.contains(document.activeElement)) {   
          setShowDropdown('');  
        }  
      }, 100);  
    };  
  };  
  
  const handleSubmenuMouseEnter = () => {   
  };  
  
  const handleSubmenuMouseLeave = (submenuRef) => {  
    return () => {  
      setTimeout(() => {  
        if (!submenuRef.current || !submenuRef.current.contains(document.activeElement)) {  
          setShowDropdown('');  
        }  
      }, 100);  
    };  
  };  
  
  
  
  return (  
    <>
    <div className={`${A.main} ${A.one}`} ref={navbarRef}> 
        <div className={A.logo}>  
          <img src={logo} alt="Logo" />  
        </div>  
        <div className={A.title}>佳肴绘卷</div>  
        <div className={A.search}>  
          <input type="text" placeholder="搜索" />  
          <button className={A.searchButton}>搜索</button>  
        </div>  
        <nav className={A.navbar}>  
          <ul>  
            <li onClick={()=>{nav("/")}}>  
              首页  
            </li>    
            <li  
                className={A.dropdownToggle}  
                onMouseEnter={handleMouseEnter('菜谱分类')}  
                onMouseLeave={() => handleMouseLeave(submenuRefRecipe)} 
                onClick={()=>{nav("/recipe")}}
            >  
              菜谱分类  
              {showDropdown === '菜谱分类' && (  
                <ul 
                className={`${A.submenu} ${showDropdown === '菜谱分类' ? A.show : ''}`}                 ref={submenuRefRecipe}  
                onMouseEnter={handleSubmenuMouseEnter}  
                onMouseLeave={handleSubmenuMouseLeave(submenuRefRecipe)}
                >
                <div className={A.hotTags}>
                  <a href=''>热门标签</a>
                  <div className={A.hotTags_list}>甜点 竹笋炒腊肉 素食</div>
                  <div className={A.hotTags_list}>减脂套餐 健康饮食 肉食</div>
                  <div className={A.hotTags_list}>包子 米饭 汤</div>
                </div>
                <div className={A.hotTags}>
                  <div><a href=''>三餐</a></div>    
                  <div className={A.hotTags_list}><a href='' style={{color:'#999'}}>早餐</a></div> 
                  <div className={A.hotTags_list}><a href='' style={{color:'#999'}}>午餐</a></div>   
                  <div className={A.hotTags_list}><a href='' style={{color:'#999'}}>晚餐</a></div> 
                  <div className={A.hotTags_list}><a href='' style={{color:'#999'}}>下午茶</a></div>
                </div>  
                <div className={A.hotTags}>
                  <div><a href=''>地方小吃</a></div>     
                  <div className={A.hotTags_list}><a href='' style={{color:'#999'}}><span>川菜</span> <span>东北菜</span></a></div>  
                  <div className={A.hotTags_list}><a href='' style={{color:'#999'}}><span>鲁菜</span> <span>京菜</span> </a></div>
                  <div className={A.hotTags_list}><a href='' style={{color:'#999'}}><span>粤菜</span> <span>闽菜</span> </a></div>
                  <div className={A.hotTags_list}><a href='' style={{color:'#999'}}><span>沪菜</span> <span>豫菜</span> </a></div>
                </div>
                <div className={A.hotTags}>
                  <div ><a href='' >甜品</a></div>
                  <div className={A.hotTags_list}><a href='' style={{color:'#999'}}>饼干</a></div>
                  <div className={A.hotTags_list}><a href='' style={{color:'#999'}}>面包</a></div>
                  <div className={A.hotTags_list}><a href='' style={{color:'#999'}}>蛋糕</a></div>
                </div>

                <div className={A.hotTags}>
                  <div ><a href='' >实用类型</a></div>
                  <div className={A.hotTags_list}><a href='' style={{color:'#999'}}>素食</a></div>
                  <div className={A.hotTags_list}><a href='' style={{color:'#999'}}>肉食</a></div>
                  <div className={A.hotTags_list}><a href='' style={{color:'#999'}}>汤</a></div>
                  <div className={A.hotTags_list}><a href='' style={{color:'#999'}}>家常菜</a></div>
                </div>
                </ul>  
              )}
            </li>
            <li  
              className={A.dropdownToggle}  
              onMouseEnter={handleMouseEnter('健康饮食')}  
              onMouseLeave={() => handleMouseLeave(submenuRefHealth)} 
            >  
              健康饮食  
              {showDropdown === '健康饮食' && (  
                <ul 
                  className={`${A.submenu} ${showDropdown === '健康饮食' ? A.show : ''}`}  
                  ref={submenuRefHealth}  
                  onMouseEnter={handleSubmenuMouseEnter}  
                  onMouseLeave={handleSubmenuMouseLeave(submenuRefRecipe)}
                  >                  
                  <li><a href=''>饮食健康</a></li>   
                  <li><a href=''>功能性调理</a></li>  
                  <li><a href=''>人群膳食</a> </li> 
                  <li><a href=''>脏腑调理</a> </li>  
                </ul> 
              )} 
            </li>  
          </ul>  
        </nav>  
        <div className={A.userActions}>  
          <a href="#">登录</a>  
        </div>  

    </div>

    <Outlet/>
    </>
  );  
};  
  
export default Daohang;